<script lang="ts" setup>
import Sidebar from './Sidebar.vue';
import Navigationbar from './Navigationbar.vue';
import Tabbar from './Tabbar.vue';

import { storeToRefs } from 'pinia';
import useSidebarStatusInfoStore from '@/stores/sidebarStatus';

const sidebarStore = useSidebarStatusInfoStore();
const { isCollapse } = storeToRefs(sidebarStore);

</script>

<template>
    <div class="common-layout">
        <el-container class="full-height">
            <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
                <Sidebar />
            </el-aside>
            <el-container>
                <el-header>
                    <Navigationbar />
                    <Tabbar></Tabbar>
                </el-header>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.common-layout,
.full-height {
    height: 100vh;
    /* 或者100%，配合html,body设置 */
    background-color: #fafbfc;
}

/* 让 aside 自己的内容也撑满 */
.aside {
    height: 100%;
    overflow: hidden;
    transition: width 0.3s ease;
    /* 添加过渡动画 */

    .el-menu {
        height: 100%;
        overflow-y: auto;
        /* 菜单滚动 */
    }
    
}

/* 调整头部和内容区域的左边距 */
.el-header,
.el-main {
    margin-left: 0;
    transition: margin-left 0.3s ease;
    /* 与侧边栏动画同步 */
}

.el-header {
    background-color: #242f42;
    color: #fff;
    padding: 0; // 移除默认内边距
    height: auto; // 或设置固定高度如 100px
    display: flex;
    flex-direction: column;
}

.el-main {
    background-color: #eef0fc;
}


</style>
